<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javaScript_dom-test</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        ul{
            list-style: none;
            display:flex;
            width: 20%;	
        }
        li{
            flex-grow: 1;
           text-align: center;
        }

        .ad_css{
            background-color: red;
        }
        #div-id{
            background-color: rgb(255, 255, 0);
            width: 100px;
            height: 100px;
        }

        #areaDivId{
            width: 500px;
            height: 300px;
            outline: 1px solid #000;
            margin-left: 10px;
            overflow:auto;
        }
        #showMsgId{
            width: 500px;
            border: 1px solid #000;
            border-top: none;
            margin-left: 10px;
        }

        #tuo-zhuai-id{
            position: relative;
            width: 1200px;
            height: 300px;
            background-color: red;
            left: auto;right: auto; margin: auto;
        }
        .tuo-zhuai-kuai-c{
            position: absolute;
            width: 50px;
            height: 50px;
        }

        .zindex{z-index: 1;}
        
        .tuo-zhuai-kuai-c1{background-color: yellow;}
        .tuo-zhuai-kuai-c2{background-color: green;left: 60px;}

        #gun-lun-id{
            width: 100px;
            height: 100px;
            background-color: red;
            left: auto;right: auto; margin: auto;
            overflow: auto
        }
        .topic{
            display:block;
            text-align: center;
        }
    </style>
    <script type="text/javaScript" src="dom-test.js"></script>
</head>
<body onunload="return '您确定退出吗？'">
    <button id="btn">一个按钮</button>
    <input id="inp" type="text" value="我是inputvlaue"/>

    <ul id="ul-id">
        <li name="li-name" id="li-id-bj">北京</li>
        <li name="li-name" id="li-id-sh">上海</li>
        <li name="li-name">天津</li>
        <li>重庆</li>
    </ul>

    <input type="checkbox" name="checkbox-name">
    <input type="checkbox" name="checkbox-name" id="checkbox-id2">
    <input type="checkbox" name="checkbox-name">
    <br/>

<div id="div-id"></div>
<br/>
<input type="button" id="ul-event" value="触发">

<!-- 鼠标移动位置 -->
<br/><br/><br/><br/><br/>
<div id="areaDivId">
    <div id="areaDivId2" style="width: 150%; height: 150%;"></div>
</div>
<div id="showMsgId"></div>


<br/><br/><br/>
<span>事件绑定+委派</span>

<ul id="ul-shijian-id" style="background-color: red;">
    <li class="li-shijian-c"><a href="javaScript:;" class="li-c-user">张三</a></li>
    <li class="li-shijian-c"><a href="javaScript:;" class="li-c-user">李四</a></li>
    <li class="li-shijian-c"><a href="javaScript:;" class="li-c-user">王五</a></li>
</ul>

<br/><br/><br/>
<span class="topic">拖拽</span>
<div id="tuo-zhuai-id" class="tuo-zhuai-c">
    <div class="tuo-zhuai-kuai-c tuo-zhuai-kuai-c1"></div>
    <div class="tuo-zhuai-kuai-c tuo-zhuai-kuai-c2"></div>
</div>
<br/><br/>

<span class="topic">滚轮</span>
<div id="gun-lun-id">
    <div style="width: 10px; height: 360px; background-color: yellow;"></div>
</div>
<br/><br/>

<input type="button" value="跳转页面" id="but-tiaozhuan">
<br/><br/>

<input type="button" value="定时触发" id="but-dinghsichufa-id">
<br/><br/>
</body>

</html>